﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="../js/header.js"></script>
		<title>修改初始密码页面</title>
		<style type="text/css">
			body {
				background: url(../images/login_back.png) no-repeat center center;
				background-size: cover;
				background-attachment: fixed;
				
			}
			
			.logo {
				float: left;
				width: 140px;
				height: 140px;
				
			}
			.title {
				float: left;
				margin-top: 35px;
				margin-left: 19px;
				font-family: PingFangSC-Semibold;
				font-size: 50px;
				color: #FFFFFF;
				letter-spacing: 0px;
				line-height: 70px;
				
			}
			.login_title {
				margin-top: 21px;
				width: 100%;
				height: 48px;
				text-align: center;
				font-family: PingFangSC-Semibold;
				font-size: 30px;
				color: #323232;
				letter-spacing: 0px;
				line-height: 48px;
			}
			.demo-ruleForm {
				position: relative;
				overflow: hidden;
				margin: 49px auto 100px;
				width: 587px;
				height: 517px;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 10px;
				
			}
			.demo-ruleForm1 {
				position: relative;
				overflow: hidden;
				margin: 29px auto 100px;
				width: 587px;
				height: 417px;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 10px;

			}
			.name {
				margin-left: 77px;
				margin-top: 23px;
				width: 432px;
				height: 60px;
			}
			.pass {
				margin-left: 77px;
				margin-top: 33px;
				width: 432px;
				height: 60px;
			}
			.formitem {
				background: rgba(255,255,255,0.00);
				border: 0px solid #AEAEAE;
				border-radius: 10px;
			}
			
			.verify_css {
				margin-left: 0;
				width: 291px;
			}
			.yanzhengma {
				position: relative;
				top: 13px;
			}
			.login_btn_text {
				font-family: MicrosoftYaHei;
				font-size: 28.19px;
				color: #FFFFFF ;
				letter-spacing: 0;
			}
			.login-button {
				margin-left: 77px;
				margin-top: 23.4px;
				width: 432px;
				height: 65px;
				background-image: linear-gradient(90deg, #1D5899 0%, #157DD4 100%);
				border-radius: 10px;
			}
			.toregist {
				margin-right: 59px;
				margin-bottom: 35px;
				font-family: PingFangSC-Medium;
				font-size: 14px;
				color: #323232;
				letter-spacing: 0;
				
			}
			.verify_all {
				margin-left: 77px;
				margin-top: 28px;
				width: 432px;
				height: 59.6px;
				
			}

		</style>
	</head>

	<body>
		<div id="app" style="min-width: 1100px;">
			<el-row type="flex" justify="center">
				<el-col :span="24" style="margin-top: 101px; text-align: center;" >
					<div style="display: inline-block;">
							<img src="../images/loginlogo.png"  class="logo">
							<span class="title">中国地震局“互联网+监管”公共服务平台</span>
							<div style="clear: both;"></div>
					</div>
				</el-col>
			</el-row>
			<el-form :model="updateLoginForm" status-icon :rules="rules" ref="updateLoginForm"  class="demo-ruleForm" @keyup.native.enter="submitForm('loginForm')">
				<h3 class="login_title">新用户首次登陆，请先修改密码</h3>
				<el-form-item class="pass formitem"  prop="password">
					<el-input prefix-icon="el-icon-key" placeholder="新密码" v-model="updateLoginForm.password" show-password></el-input>
				</el-form-item>
				<el-form-item class="pass formitem"  prop="confirmPassword">
					<el-input prefix-icon="el-icon-key" placeholder="确认密码" v-model="updateLoginForm.confirmPassword" show-password></el-input>
				</el-form-item>
				<el-form-item >
					<el-button class="login-button" type="primary" @click="submitForm('updateLoginForm')">
						<span class="login_btn_text">保&nbsp;存</span>
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var login = new Vue({
				el: '#app',
				data() {
					return {
						updateLoginForm:{
						    userId:'',
						    password:'',
                            confirmPassword:''
						},
						rules: {
							password: [{
									required: true,
									message: '请输入新密码',
									trigger: 'blur'
								}, //触发
								{
									min: 6,
									message: '密码不小于6位',
									trigger: 'blur'
								}
							],
                            confirmPassword: [{
                                required: true,
                                message: '请输入确认密码',
                                trigger: 'blur'
                            }, //触发
                                {
                                    min: 6,
                                    message: '密码不小于6位',
                                    trigger: 'blur'
                                }
                            ],

						}
					}
				},
				mounted() {
                    // 获取参数
                    let url = window.location.search; // ?userId=
					this.updateLoginForm.userId= url.split("?")[1].split("=")[1];
				},
				methods: {
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					submitForm(formName) {

						this.$refs[formName].validate((valid) => {
                            if(valid) {
                                if( this.updateLoginForm.password != this.updateLoginForm.confirmPassword){
                                    this.$message.error("输入密码与确认密码不一致");
								}else{
                                    axios({
                                        method: 'get',
                                        url: appBaseUrl + '/updateUser/updatepassword',
                                        params: {
                                            userId:this.updateLoginForm.userId,
                                            password:this.updateLoginForm.password
										}
                                    })
                                        .then(response => {
                                            let data = response.data;
                                           /* if(data.code == 200) {
                                                axios({
                                                    method: 'post',
                                                    url: appBaseUrl + '/login/logout',
                                                })
                                                    .then(response => {
                                                        let data = response.data;
                                                        if(data.code == 200){
                                                            localStorage.clear();
                                                            location.href = location.origin + appBaseUrl + '/html/login.html';
                                                        }else{
                                                            this.$message.error(data.msg);
                                                        }
                                                    })
                                                    .catch(function(error){
                                                        console.log(error);
                                                    })
                                            } else {
                                                this.$message.error(data.msg);
                                            }*/
                                        })
                                        .catch(function(error) {
                                            console.log(error);
                                        });
								}

                            } else {
                                return false;
                            }
						});
					}
				}
			})
		</script>
	</body>

</html>